<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="format-detection" content="telephone=no">
    <title>form</title>
    <link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
    <link rel="stylesheet" href="../assets/third/seedsui/plugin/animate/animate.css">
</head>

<body>
<div id="section_container">
    <section data-role="section" id="page_form" class="active">
        <header>
            <div class="titlebar">
                <a data-toggle="back" href="#"><i class="icon icon-arrowleft"></i></a>
                <h1>表单样式</h1>
            </div>
        </header>
        <article id="main_article" data-role="article" class="active">
            <p class="sliver">个性表单</p>
            <div class="group">
                <div class="input-box">
                    <i class="color-placeholder icon icon-search"></i>
                    <input type="text" placeholder="投票标题">
                </div>
                <hr/>
                <div class="input-box">
                    <i class="icon"></i>
                    <textarea placeholder="填写描述，150字以内" id="description" name="description" data-rule="required maxlength:150"></textarea>
                </div>
                <div class="input-box box-right">
                    <span id="description-count"></span>
                    <i class="color-placeholder icon icon-pic"></i>
                </div>
                <hr/>
                <div class="input-box lineheight0 padding8">
                    <p class="box-flex-1">支持多选</p>
                    <div data-role="toggle" class="switch reverse notext" data-on="是" data-name="switch2" data-on-value="2"  data-off-value="2off" data-off="否">
                        <div class="switch-handle"></div>
                    </div>
                </div>
                <hr/>
                <div class="input-box lrpadding8">
                    <p class="box-flex-1">最多投几项</p>
                    <select class="rl" style="padding-right:24px;">
                        <option>无限制</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                        <option>10</option>
                    </select>
                    <i class="icon icon-arrowright color-placeholder"></i>
                </div>
                <hr/>
                <div id="formOption">
                    <div class="row noborder">
                        <div class="dot" style="margin: 10px 20px 10px 24px;"></div>
                        <div class="input-box box-flex-1 underline">
                            <input type="text" placeholder="输入选项内容" />
                            <i class="icon icon-pic color-placeholder"></i>
                            <div class="nowrap" style="width:40px;height:40px;">
                                <button name="del" class="nolrpadding noclick bg-transparent color-tip">
                                    <i class="icon icon-rdocancel-fill size24"></i>
                                </button>
                                <button name="delVerify" class="hide animated fadeInRight nolrpadding noclick bg-tip">
                                    <i class="icon icon-trash size24"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="row noborder">
                        <div class="dot" style="margin: 10px 20px 10px 24px;"></div>
                        <div class="input-box box-flex-1 underline">
                            <input type="text" placeholder="输入选项内容" />
                            <i class="icon icon-pic color-placeholder"></i>
                            <div class="nowrap" style="width:40px;height:40px;">
                                <button name="del" class="nolrpadding noclick bg-transparent color-tip">
                                    <i class="icon icon-rdocancel-fill size24"></i>
                                </button>
                                <button name="delVerify" class="hide animated fadeInRight nolrpadding noclick bg-tip">
                                    <i class="icon icon-trash size24"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="row noborder">
                        <div class="dot" style="margin: 10px 20px 10px 24px;"></div>
                        <div class="input-box box-flex-1 underline">
                            <input type="text" placeholder="输入选项内容" />
                            <i class="icon icon-pic color-placeholder"></i>
                            <div class="nowrap" style="width:40px;height:40px;">
                                <button name="del" class="nolrpadding noclick bg-transparent color-tip">
                                    <i class="icon icon-rdocancel-fill size24"></i>
                                </button>
                                <button name="delVerify" class="hide animated fadeInRight nolrpadding noclick bg-tip">
                                    <i class="icon icon-trash size24"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="input-box text-center">
                    <a class="input-text">＋添加投票选项</a>
                </div>
            </div>
            <p class="sliver">表单组件</p>
            <div class="input-box radius20">
                <i class="color-placeholder icon icon-search"></i>
                <input type="text" placeholder="搜索框" class="search">
            </div>
            <div class="input-box radius20" data-input="clear">
                <input type="text" placeholder="搜索框" class="search"/>
                <i class="color-placeholder icon icon-clear-fill"></i>
            </div>
            <div class="input-box">
            	<input type="text" placeholder="搜索框" />
                <i class="color-placeholder icon icon-search"></i>
            </div>

            <div class="input-box">
                <input type="text" placeholder="密码框" />
                <i class="color-placeholder icon icon-eye"></i>
            </div>

            <div class="input-box">
                <select>
                    <option>选项1</option>
                    <option>选项2</option>
                    <option>选项3</option>
                </select>
                <i class="color-placeholder icon icon-arrowdown"></i>
            </div>

            <div class="input-box">
                <input type="number" placeholder="手机框" />
                <i class="color-placeholder icon icon-phone"></i>
            </div>

            <div class="input-box">
                <input type="number" placeholder="电话框" />
                <i class="color-placeholder icon icon-tel"></i>
            </div>

            <div class="input-box">
                <input type="url" placeholder="链接框"/>
                <i class="color-placeholder icon icon-earth"></i>
            </div>

            <div class="input-box nopadding margin8 ricon">
                <input type="date" value="2015-06-16"/>
                <i class="color-placeholder icon icon-calendar"></i>
            </div>
            
            <div class="input-box nopadding margin8 ricon">
                <input type="month" value="2015-06"/>
                <i class="color-placeholder icon icon-calendar"></i>
            </div>
            
            <div class="input-box nopadding margin8 ricon">
                <input type="datetime-local" value="2015-06-01T10:55:33"/>
                <i class="color-placeholder icon icon-calendar"></i>
            </div>
            
            <div class="input-box nopadding margin8 ricon">
                <input type="time" value="08:30"/>
                <i class="color-placeholder icon icon-time"></i>
            </div>

            <small class="color-tip margin8">苹果Ios8.x不支持周选择框</small>
            <div class="input-box nopadding margin8 ricon">
                <input type="week" value="2015-W15"/>
                <i class="color-placeholder icon icon-calendar"></i>
            </div>

            <div class="input-box">
                <input type="text" placeholder="扫码控件框"/>
                <i class="color-placeholder icon icon-qrcodeline"></i>
            </div>
            
            <div class="input-box">
                <div class="input-text">拍照</div>
                <i class="color-placeholder icon icon-camera"></i>
            </div>

            <div class="input-box">
                <div class="input-text"></div>
                <i class="color-placeholder icon icon-record"></i>
            </div>
            
            <div class="input-box">
                <input type="text"/>
                <i class="color-placeholder icon icon-position"></i>
            </div>

            <p class="sliver">左右布局</p>
            <form id="formlr">
                <div class="row">
                    <label class="row-left">文本框</label>
                    <div class="row-right input-box">
                        <input type="text">
                    </div>
                </div>
                <div class="row">
                    <label class="row-left">radio</label>
                    <div class="row-right card padding8">
                        <label><input type="radio" checked="true" name="rdo"><span>选中radio</span></label>
                        <br/>
                        <label><input type="radio" name="rdo"><span>普通radio</span></label>
                        <br/>
                        <label><input type="radio" checked="true" disabled="true"><span>禁用选中radio</span></label>
                        <br/>
                        <label><input type="radio" disabled="true"><span>禁用普通radio</span></label>
                    </div>
                </div>
                <div class="row">
                    <label class="row-left">checkbox</label>
                    <div class="row-right card padding8">
                        <label><input type="checkbox" checked="true"><span>选中checkbox</span></label>
                        <br/>
                        <label><input type="checkbox"><span>普通checkbox</span></label>
                        <br/>
                        <label><input type="checkbox" checked="true" disabled="true"><span>禁用选中checkbox</span></label>
                        <br/>
                        <label><input type="checkbox" disabled="true"><span>禁用普通checkbox</span></label>
                    </div>
                </div>
                <div class="row">
                    <label class="row-left">switch</label>
                    <div class="row-right card padding8">
                        <div data-role="toggle" class="switch" data-on="是" data-name="switch1" data-on-value="1ok" data-off-value="1off" data-off="否">
                            <div class="switch-handle"></div>
                        </div>
                        <div data-role="toggle" class="switch notext" data-on="是" data-name="switch2" data-on-value="2"  data-off-value="2off" data-off="否">
                            <div class="switch-handle"></div>
                        </div>
                        <div class="rowspace"></div>
                        <div data-role="toggle" class="switch reverse" data-on="是" data-name="switch3" data-on-value="3"  data-off-value="3off" data-off="否">
                            <div class="switch-handle"></div>
                        </div>
                        <div data-role="toggle" class="switch reverse notext" data-on="是" data-name="switch4" data-on-value="4"  data-off-value="4off" data-off="否">
                            <div class="switch-handle"></div>
                        </div>
                    </div>
                </div>
                <p class="sliver">兼容性尚未完全普及，还请谨慎使用</p>
                <div class="row">
                    <label class="row-left">进度条</label>
                    <div class="row-right card padding8">
                       <progress max="100" value="80">80</progress>
                    </div>
                </div>
                <div class="row">
                    <label class="row-left">拉动条</label>
                    <div class="row-right card padding8">
                       <input type="range" min="32" max="512" step="32" value="32" id="range"/>
                       
                    </div>
                </div>
                <div class="row">
                    <label class="row-left">拾色器</label>
                    <div class="row-right card padding8">
                       <input type="color"/>
                    </div>
                </div>
            </form>

            <p class="sliver">分组布局</p>
            <form id="formgroup">
                <div class="group">
                    <div class="row">
                        <label class="row-left">用户名</label>
                        <div class="row-right input-box">
                            <input type="text" placeholder="用户名" name="username"/>
                        </div>
                    </div>
                    <div class="row">
                        <label class="row-left">密码</label>
                        <div class="row-right input-box">
                            <input type="text" placeholder="密码" name="password"/>
                            <i class="color-placeholder icon icon-eye"></i>
                        </div>
                    </div>
                    <div class="row">
                        <label class="row-left">确认</label>
                        <div class="row-right input-box">
                            <input type="text" placeholder="确认" name="reconfirm"/>
                            <i class="color-placeholder icon icon-eye"></i>
                        </div>
                    </div>
                </div>
                <div class="group">
                    <div class="row">
                        <label class="row-left">昵称</label>
                        <div class="row-right input-box">
                            <input type="text" placeholder="填写昵称" name="nickname"/>
                        </div>
                    </div>
                    <div class="row">
                        <label class="row-left">性别</label>
                        <div class="row-right input-box input-text">
                            <label><input type="radio" value="male" name="sex" checked/><span>男</span></label>
                            <label style="margin-left:8px;"><input type="radio" value="female" name="sex"/><span>女</span></label>
                        </div>
                    </div>
                    <div class="row">
                        <label class="row-left">出生日期</label>
                        <div class="row-right input-box">
                            <input type="date" name="birthday" placeholder="出生日期"/>
                        </div>
                    </div>
                </div>
                <div class="group">
                    <div class="row">
                        <label class="row-left">职业</label>
                        <div class="row-right input-box">
                            <input type="text" class="job" readonly="" placeholder="选择职业，找到同行"/>
                            <i class="color-placeholder icon icon-arrowright"></i>
                        </div>
                    </div>
                    <div class="row">
                        <label class="row-left">公司</label>
                        <div class="row-right input-box">
                            <input type="text" class="company" placeholder="公司"/>
                        </div>
                    </div>
                    <div class="row">
                        <label class="row-left">学校</label>
                        <div class="row-right input-box">
                            <input type="text" class="school" placeholder="填写学校，发现校友"/>
                        </div>
                    </div>
                    <div class="row">
                        <label class="row-left">所在地</label>
                        <div class="row-right input-box">
                            <input type="text" name="live" readonly="" placeholder="选择所在地"/>
                            <i class="color-placeholder icon icon-arrowright"></i>
                        </div>
                    </div>
                    <div class="row">
                        <label class="row-left">故乡</label>
                        <div class="row-right input-box">
                            <input type="text" name="hometown" readonly="" placeholder="选择所在地"/>
                            <i class="color-placeholder icon icon-arrowright"></i>
                        </div>
                    </div>
                    <div class="row">
                        <label class="row-left">邮箱</label>
                        <div class="row-right input-box">
                            <input type="text" name="email" placeholder="填写邮箱"/>
                        </div>
                    </div>
                </div>
                <div class="group">
                    <div class="row">
                        <label class="row-left">个人说明</label>
                        <div class="row-right input-box">
                            <textarea class="label-right noborder" name="note" placeholder="个人说明"></textarea>
                        </div>
                        
                    </div>
                </div>
            </form>
        </article>
    </section>
</div>
<!--- third -->
	<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
	<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
	<!---  agile -->
	<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
	<!-- app -->
	<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
	<script type="text/javascript" src="../assets/third/seedsui/plugin/seedsui/seedsui.min.js"></script>
	<script>
    	//表单控件初始化(主要是针对小眼睛和开关控件)
    	window.addEventListener("load",function(){
    		var f=new Form("#formlr");
    	},false);
    	//定义exmobi返回
    	function back(){history.go(-1);}
    </script>
</body>
</html>